<template>
  <div class="icon-item">
    <div
      class="icon"
      @click="onRouteTo(field)"
      :style="{ backgroundColor: bgColor }"
    >
      <span class="iconfont" :class="icon"></span>
    </div>
    <p class="icon-text">{{ iconText }}</p>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "CategoryIconsSub",
  props: {
    bgColor: String,
    icon: String,
    field: String,
    iconText: {
      type: String,
      default: function () {
        return "分类";
      },
    },
  },
  methods: {
    ...mapMutations(["selectField"]),
    onRouteTo: function (field) {
      this.selectField(field);
      this.$router.push("/list");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~styles/mixins.scss";
@import "~styles/variables.scss";

.icon-item {
  @include flex-column;
  @include vh-center;
  width: 20%;
  padding: 0.2rem 0;

  .icon {
    @include vh-center;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;

    .iconfont {
      color: #fff;
      font-size: 0.26rem;
    }
  }
  .icon-text {
    font-size: 0.14rem;
    text-align: center;
    margin-top: 0.1rem;
  }
}
</style>